<template>
  <div class="forms-container">
    <el-form ref="killForm" :model="killForm" class="form" @submit.native.prevent="submitForm">
      <h2>周末秒杀</h2>
      <el-form-item label="sid">
        <el-input v-model="killForm.sid" id="sid" name="sid" class="input-field"></el-input>
      </el-form-item>
      <el-form-item label="prizeId">
        <el-input v-model="killForm.prizeId" id="prizeId" name="prizeId" class="input-field"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" native-type="submit" :loading="loading" class="submit-button">提交</el-button>
      </el-form-item>
    </el-form>

    <el-form ref="killListForm" :model="killListForm" class="form" @submit.native.prevent="submitKillListForm">
      <h2>周末秒杀列表</h2>
      <el-form-item label="sid">
        <el-input v-model="killListForm.sid" id="sid-list" name="sid" class="input-field"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" native-type="submit" :loading="loading" class="submit-button">查询</el-button>
      </el-form-item>
    </el-form>

    <el-form ref="killTestForm" :model="killTestForm" class="form" @submit.native.prevent="submitKillTestForm">
      <h2>周末秒杀预热</h2>
      <el-form-item>
        <el-button type="primary" native-type="submit" :loading="loading" class="submit-button">预热</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>import axios from '@/server/axios.js';
import {ElMessage} from "element-plus";

export default {
  name: 'KillForms',
  data() {
    return {
      killForm: {
        sid: '',
        prizeId: ''
      },
      killListForm: {
        sid: ''
      },
      killTestForm: {},
      loading: false
    };
  },
  methods: {
    async submitForm() {
      this.loading = true;
      const formData = new FormData();
      formData.append('sid', this.killForm.sid);
      formData.append('prizeId', this.killForm.prizeId);
      console.log(this.getCurrentTimestamp());
      formData.append('timestamp', this.getCurrentTimestamp());

      try {
        const response = await axios.post('/api/kill', formData);
        console.log('Response:', response.data);
        // 处理响应数据
      } catch (error) {
        console.error('Error:', error);
        // 处理错误
      } finally {
        this.loading = false;
      }
    },
    async submitKillListForm() {
      this.loading = true;
      const formData = new FormData();
      formData.append('sid', this.killListForm.sid);

      try {
        const response = await axios.post('/api/killList', formData);
        console.log('Response:', response.data);
        // 处理响应数据
      } catch (error) {
        ElMessage.error(error)
        console.error('Error:', error);
        // 处理错误
      } finally {
        this.loading = false;
      }
    },
    async submitKillTestForm() {
      this.loading = true;

      try {
        const response = await axios.post('/api/killTest');
        console.log('Response:', response.data);
        // 处理响应数据
      } catch (error) {

        console.error('Error:', error);
        // 处理错误
      } finally {
        this.loading = false;
      }
    },
    getCurrentTimestamp() {
      const date = new Date(); // 获取当前时间
      const utcDate = new Date(date.toISOString()); // 将其转换为 UTC 时间

      const year = utcDate.getUTCFullYear();
      const month = String(utcDate.getUTCMonth() + 1).padStart(2, '0');
      const day = String(utcDate.getUTCDate()).padStart(2, '0');
      const hours = String(utcDate.getUTCHours()).padStart(2, '0');
      const minutes = String(utcDate.getUTCMinutes()).padStart(2, '0');
      const seconds = String(utcDate.getUTCSeconds()).padStart(2, '0');
      const milliseconds = String(utcDate.getUTCMilliseconds()).padStart(3, '0');

// 计算微秒和纳秒部分
      const microseconds = String(Math.floor((milliseconds % 1) * 1000)).padStart(3, '0');
      const nanoseconds = String(Math.floor((milliseconds % 1) * 1000000)).padStart(3, '0');

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}.${milliseconds}${microseconds}${nanoseconds}`;
    }
  }
};
</script>

<style scoped>.forms-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.form {
  background-color: #fff;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.form h2 {
  font-size: 1.5em;
  margin-bottom: 10px;
  color: #333;
}

.form .input-field {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1em;
}

.form .submit-button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 1em;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.form .submit-button:hover {
  background-color: #0056b3;
}
</style>